window.onload = function (){

	//获得元素
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var oP = document.getElementById('p1');
	var oStrong = document.getElementById('strong1');
	var oImg = document.getElementById('img1');
	var aBtn = document.getElementsByTagName('input');
	var buttons = document.getElementById('buttons').getElementsByTagName('span');
	//将图片文字放在数组中
	var arrUrl = [ '../img/1.jpg', '../img/2.jpg', '../img/3.jpg', '../img/4.jpg','../img/5.jpg' ];
	var arrText = [ '第一张图片', '第二张图片', '第三张图片', '第四张图片' ,'第五张图片'];
	var num = 0;
	var index = 0;
	var timer=null;
	var second=3000;//设置自动播放时间

	// 初始化
	function fnTab(){
		oP.innerHTML = arrText[num];
		oStrong.innerHTML = num+1 + ' / ' + arrText.length;
		oImg.src = arrUrl[num];
	}
	fnTab();

	//将所有按钮的类名都去掉，否则会出现多个带有颜色的小圆点
     function showButton() {
            for (var i = 0; i < buttons.length ; i++) {
                if( buttons[i].className == 'on'){
                    buttons[i].className = '';
                    break;
                }

            }
        };



	//切换到上一张按钮
	oPrev.onclick = function (){
		num --;
		showButton();//使显示相应的圆点
		if( num == -1 ){
			num = arrText.length-1;
		}
		buttons[(index+num)%5].className='on';
		fnTab();
	};

	//切换到下一张按钮
	oNext.onclick = function(){
		num ++;
		showButton();
		if( num == arrText.length ){
				num = 0;
		}
		buttons[(index+num )%5].className = 'on';//圆按钮能够循环显示相应的颜色
		fnTab();

	};

	//为每一个按钮都添加一个点击事件
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
        	showButton();
			var myIndex = parseInt(this.getAttribute('index'));//获得点击按钮的index值
            index2 = myIndex;
            buttons[index2-1].className="on";//注意要-1，因为index值是从1开始的，而下标是从0开始的
			oP.innerHTML = arrText[index2-1];
		    oStrong.innerHTML = index2 + ' / ' + arrText.length;
		    oImg.src = arrUrl[index2-1];
		   	}
        }




	//设置定时器；
	function play() {
	    timer = setTimeout(function () {
	        oNext.onclick();
	        play();
	    }, second);
	}
	function stop() {
	    clearTimeout(timer);
	}

	box.onmouseover=stop;//鼠标移到图片区域时，不执行自动播放功能
	box.onmouseout=play;//当鼠标离开图片区域时，执行自动播放功能
	play();

};
